<template>
  <section>
     <!-- 面包屑 -->
     <breadcrumbs></breadcrumbs>
    <!-- 查询条件 -->
    <h1>收款账户管理</h1>
    <btns @exec="exec"
          class="btn-box"></btns>
    <div class="data-container scroll-table">
      <!-- 按钮列表 -->
      <el-table :data="tableData"
                border
                style="width: 100%"
                class="table-box"
                @selection-change="tableSelectionChange">
        <el-table-column type="index"
                         label="序号"
                         width="50">
        </el-table-column>
        <el-table-column prop="companyName"
                         label="公司名称">
        </el-table-column>
        <el-table-column prop="tin"
                         label="纳税识别号">
        </el-table-column>
        <el-table-column prop="invoiceAddress"
                         label="公司地址">
        </el-table-column>
        <el-table-column prop="phone"
                         label="联系电话">
        </el-table-column>
        <el-table-column prop="bank"
                         label="开户行">
        </el-table-column>
        <el-table-column prop="bankNo"
                         label="账户">
        </el-table-column>
        <el-table-column label="操作"
                         width="135px">
          <template slot-scope="scope">
            <!-- <div class="btn-box"> -->
            <span>
              <el-button @click="editbrand(scope.row)"
                         class="btn-icon">修改</el-button>
            </span> 
            <!-- </div> -->
            <span>
             <el-button @click="delbrand(scope.row)"
                         class="btn-icon">删除</el-button>
            </span>
          </template>

        </el-table-column>
      </el-table>
    </div>
    <!--新增修改界面-->
    <el-dialog title="新增回收品牌"
               :visible.sync="AddFormVisible">
      <el-form :model="addForm"
               ref="addForm"
               :rules="rules">
        <el-table-column type="index"
                         label="序号"
                         width="50">
        </el-table-column>
        <el-form-item label="公司名称"
                      :label-width="formLabelWidth"
                      prop="companyName">
          <el-input v-model="addForm.companyName"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="公司地址"
                      :label-width="formLabelWidth"
                      prop="address">
          <el-input v-model="addForm.address"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系电话"
                      :label-width="formLabelWidth"
                      prop="phone">
          <el-input v-model="addForm.phone"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="纳税识别号"
                      :label-width="formLabelWidth"
                      prop="tin">
          <el-input v-model="addForm.tin"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="账号"
                      :label-width="formLabelWidth"
                      prop="bankNo">
          <el-input v-model="addForm.bankNo"
                    autocomplete="off" type="number"></el-input>
        </el-form-item>
        <el-form-item label="开户行"
                      :label-width="formLabelWidth"
                      prop="bank">
          <el-input v-model="addForm.bank"
                    autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="AddFormVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="submit('addForm')">确 定</el-button>
      </div>
    </el-dialog>
  </section>
</template>

<script>
import btns from '@/components/btns.vue'
import breadcrumbs from "@/components/breadcrumbs.vue";
import {
  format
} from "../../utils/tool"
export default {
  components: {
    btns,
     breadcrumbs,
  },
  data () {
    return {
      imageUrl: "",
      userData: [],
      searchName: "",
      houseArr: [],
      adduserIds: [],
      formLabelWidth: "120px",
      AddFormVisible: false,
      addForm: {
        houseIds: []
      },
      currType: 1,
      yearData: "",
      topData: {},
      btnForm: {},
      userForm: {
        current: 1,
        size: 10,
        totalCount: 0,

      },
      searchForm: {
        name: ''
      },
      addORUpdateVisible: false,
      funTit: '',
      cityForm: {
        cityName: "",
        cityId: ''
      },
      rules: {
        "btnIcon": [],
        "companyName": [{
          required: true,
          message: '请输入公司名称',
          trigger: 'blur'
        }],
        "address": [{
          required: true,
          message: '请输入公司地址',
          trigger: 'blur'
        }],
        "phone": [{
          required: true,
          message: '请输入联系电话',
          trigger: 'blur'
        }],
        "tin": [{
          required: true,
          message: '请输入纳税识别号',
          trigger: 'blur'
        }],
        "bankNo": [{
          required: true,
          message: '请输入账号',
          trigger: 'blur'
        }],
        "bank": [{
          required: true,
          message: '请输入开户行',
          trigger: 'blur'
        }],
        "shopName": [{
          required: true,
          message: '请输入采购公司名称',
          trigger: 'blur'
        }],
        "title": [{
          required: true,
          message: '请输入消息标题',
          trigger: 'blur'
        }],
        "userType": [{
          required: true,
          message: '请选择用户接收终端类型',
          trigger: 'change'
        }],
        "info": [{
          required: true,
          message: '请输入要发送的消息主体',
          trigger: 'blur'
        }],
      },
      tableData: [],
      tableSelection: []
    }
  },
  created () {
    this.getTableData(this.searchForm.info);
  },
  methods: {
    delbrand (row) {
      this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.account.delPayAcount({ payId: row.payId }).then(d => {
          if (d.code == 200) {
            this.getTableData();
            this.$message.success('删除成功');
          } else {
            this.$message.error(d.msg);
          }
        }).catch((e) => {
          console.log(e);
        })
      });
    },
    editbrand (row) {
      this.AddFormVisible = true;
      this.funTit = 'update';
      console.log(row)
      this.addForm = row;
      this.addForm = {
        address: row.invoiceAddress,
        bankNo: row.bankNo,
        companyName: row.companyName,
        phone: row.phone,
        tin: row.tin,
        bank: row.bank,
        payId: row.payId
      }
      // this.addForm.price = row.backMoney;
      // this.addForm.name = row.brandName;
      this.imageUrl = row.bandImg;
    },
    submit (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.funTit == 'add') {
            this.$api.account.addPayAcount({
              address: this.addForm.address,
              bankNo: this.addForm.bankNo,
              companyName: this.addForm.companyName,
              phone: this.addForm.phone,
              tin: this.addForm.tin,
              bank: this.addForm.bank
            }).then(d => {
              if (d.code == 200) {
                this.addForm = {};
                this.$message({
                  type: "success",
                  message: "添加成功"
                })
                // this.$refs.btnForm.resetFields();
                this.AddFormVisible = false;
                this.getTableData();
              } else {
                this.$message.error(d.msg);
              }
            }).catch((e) => {
              console.log(e);
            })
          } else {
            // console.log(this.addForm, 12313)
            this.$api.account.editPayAcount(
              {
                payId: this.addForm.payId,
                address: this.addForm.address,
                bankNo: this.addForm.bankNo,
                companyName: this.addForm.companyName,
                phone: this.addForm.phone,
                tin: this.addForm.tin,
                bank: this.addForm.bank
              }

            ).then(d => {
              if (d.code == 200) {
                this.imageUrl = '';
                this.getTableData();
                this.$message({
                  type: "success",
                  message: "修改成功"
                })
                this.AddFormVisible = false;
              } else {
                this.$message.error(d.msg);
              }
            }).catch((e) => {
              console.log(e);
            })
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    handleAvatarSuccess (res, file) {
      this.imageUrl = '';
      console.log(res)
      this.imageUrl = res;
    },
    beforeAvatarUpload (file) {
      console.log(file, 231232)
      const isLt2M = file.size / 1024 / 1024 < 10;
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 10MB!');
      }
      return isLt2M;
    },
    gototogetHouseMent (row) {
      console.log(row)
      this.$router.push({
        path: "/message/mesageDetails",
        query: {
          messageId: row.messageId
        }
      })
    },
    getHouseArr () {
      this.$api.operate.getNotCityHouseList({
        cityId: 1,
      }).then(res => {
        if (res.code == 200) {
          this.houseArr = res.data;
        }
      })
    },
    getHouse () {
      console.log(this.addForm.houseIds)
    },
    sendMessage (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$api.user.sendMessage({
            content: this.addForm.info,
            recIds: this.adduserIds.length >= 0 ? this.adduserIds.join(",") : '',
            recType: this.currType,
            title: this.addForm.title
          }).then(res => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "发送消息成功"
              })
              this.adduserIds = [];
              this.currType = 0;
              this.AddFormVisible = false;
              this.getTableData(this.searchForm.current, this.searchForm.size, this.searchForm.info, this.searchForm.sid, this.searchForm.gid);
              this.addForm = {};
            } else {
              this.$message.error(res.msg)
            }
          })
        }
      })
    },
    addhouse () {
      this.AddFormVisible = true
    },
    handleSizeChange (v) {
      console.log(v)
      this.searchForm.size = v;
      this.getTableData(this.searchForm.current, v, this.searchForm.info);
    },
    handleCurrentChange (v) {
      this.searchForm.current = v;
      this.getTableData(v, this.searchForm.size, this.searchForm.info);
    },
    getTableData () {
      this.$api.account.getAdminPayAcountList().then(res => {
        if (res.code == 200) {
          this.tableData = res.data;
          console.log(this.tableData)
          this.searchForm.totalCount = res.totalCount;
          this.searchForm.size = res.pageSize
        }
      })
    },
    chageYearData () {
      this.$api.recycleBin.getAdminBackStopCount({
        year: this.yearData
      }).then(res => {
        if (res.code == 200) {
          this.topData = res.data
          this.searchForm.totalCount = res.totalCount;
          this.searchForm.size = res.pageSize
        }
      })
    },
    getYearData () {
      this.$api.recycleBin.getAdminBackStopCount().then(res => {
        if (res.code == 200) {
          this.topData = res.data

        }
      })
    },
    handleReset () {
      this.$refs.searchForm.resetFields();
      this.getTableData(this.searchForm.current, this.searchForm.size)
    },
    search () {
      this.getTableData(this.searchForm.info);
    },
    btnlist () {
      //获取接口
      this.$api.city.getList({}).then(d => {
        if (d.code == 200) {
          this.tableData = d.data;
        } else {
          this.$message.error(d.msg);
        }
      }).catch((e) => {
        console.log(e);
      })
    },
    tableSelectionChange (val) {
      this.tableSelection = val;
    },
    exec (fun) {
      if (this[fun]) {
        this.funTit = fun;
        this[fun]()
      } else {
        this.$message.error('方法未定义');
      }
    },
    add () {
      this.AddFormVisible = true;
    },
    update () {
      if (this.tableSelection.length != 1) {
        this.$message.error('请选中一行数据');
        return
      }
      this.addForm = this.tableSelection[0];
      this.AddFormVisible = true;
      console.log(this.addForm, '234234')
    },
    del () {
      if (this.tableSelection.length != 1) {
        this.$message.error('请选中一行数据');
        return
      }

    },
    refresh () {
      this.getTableData(this.searchForm.current, this.searchForm.size)
    },
    enable () {
      if (this.tableSelection.length != 1) {
        this.$message.error('请选中一行数据');
        return
      }
      var demo = this.tableSelection[0];
      if (demo.state == 1) {
        this.$message.error('该数据已启用');
        return
      }
      this.$confirm('此操作将启用该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.shopList.updateStatus({
          shopId: demo.shopId,
          status: 1
        }).then(d => {
          if (d.code == 200) {
            this.getTableData(this.searchForm.current, this.searchForm.size, this.searchForm.cid, this.searchForm.info);
            this.$message.success('启用成功');
          } else {
            this.$message.error(d.msg);
          }
        }).catch((e) => {
          console.log(e);
        })
      });
    },
    disable () {
      if (this.tableSelection.length != 1) {
        this.$message.error('请选中一行数据');
        return
      }
      var demo = this.tableSelection[0];
      if (demo.state == 2) {
        this.$message.error('该数据已禁用');
        return
      }
      this.$confirm('此操作将禁用该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.shopList.updateStatus({
          shopId: demo.shopId,
          status: 2
        }).then(d => {
          if (d.code == 200) {
            this.getTableData(this.searchForm.current, this.searchForm.size, this.searchForm.cid, this.searchForm.info);
            this.$message.success('禁用成功');
          } else {
            this.$message.error(d.msg);
          }
        }).catch((e) => {
          console.log(e);
        })
      });
    }
  }
}
</script>

<style lang="less" scoped>
.btn-icon {
  padding: 10px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.table-box {
  text-align: center;
}
.btn-box {
  margin-bottom: 20px;
}
.img-box {
  width: 50px;
  height: 50px;
}
.check-user-box {
  margin-left: 20px;
  margin-bottom: 20px;
}
.user-box-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.fontText {
  font-size: 20px;
}

.fontTop {
  font-size: 40px;
}

.top-box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
}

.top-item {
  border: 1px gray solid;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20%;
  padding: 20px;

  .top-icon {
    width: 50%;
    height: 150px;
    border: 1px red solid;
  }

  .right-item-box {
    text-align: center;
    margin-left: 20px;
  }
}
</style>
